<template>
  <div class="input-wrapper border">
    <el-input
      class="editor"
      v-model="curValue"
      @change="onChange"
      @blur="onBlur"
      :maxlength="maxLength"
      clearable
    />
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
const emit = defineEmits(['input', 'change', 'blur'])
// const model = defineModel()

const props = defineProps({
  'modelValue': {
    type: String,
    default: ''
  },
  maxLength: {
    type: Number,
    default: 500
  }
})

const curValue = ref('')

const onChange = () => {
  console.log('onChange', curValue)
  emit('input', curValue.value) // 用于自定义 v-model
}

const onBlur = () => {
  emit('change', curValue.value)
  emit('blur', curValue.value)
}
onMounted(() => {
  curValue.value = props.modelValue
})
watch(
  () => props.modelValue,
  (newVal) => {
    const isEqual = newVal === curValue.value
    if (isEqual) return // 和当前内容一样，则忽略
// console.log('watch', newVal.value)
    // 重置 HTML
    curValue.value = newVal
  },
  {
    // immediate: true
  }
)
</script>
<style lang="scss" scoped>
.input-wrapper {
  position: relative;
  width: 100%;
  // min-height: 45px;
}

.editor {
  padding: 0;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
}

.border {
  border-radius: 2px;

  &:hover {
    box-shadow: none; // 0 0 4px 0 rgb(255 192 62 / 36%);
  }
}
</style>
